<template>
  <div class="main">
    <div class="center">
      <div class="navbar">
        <!-- 顶部 -->
        <Header></Header>
        <!-- 走马灯 -->
        <div class="box">
          <ul>
            <li v-for="(image, index) in images" :key="index">
              <img :src="image" alt="" />
            </li>
          </ul>
        </div>
        <!-- 宣传视频 -->
        <div class="shipin-box" v-if="videoInfo&&videoInfo.url">
          <div class="systitle">视频介绍</div>
          <div class="video_box">
            <video :poster="videoInfo.imgUrl" :src="videoInfo.url" controls></video>
          </div>
        </div>
        <!-- 系统特色 -->
        <div class="sysTs">
          <div class="systitle">系统特色</div>
          <div class="sys_one">
            <!-- one -->
            <div class="box1">
              <div class="titlename">自定义配置独立官网</div>
              <div class="txtName">
                <div class="txt">可配置独立域名,扩展APP和小程序</div>
              </div>
              <div>
                <img
                  style="width: 226px; height: 155px"
                  src="../../../assets//ConsignmentFourzero/home/zdy.png"
                  alt=""
                />
              </div>
            </div>
            <!-- one end -->
            <!-- one -->
            <div class="box1">
              <div class="titlename">个性化选号网</div>
              <div class="txtName">
                <div class="txt">可配置化选号网</div>
                <div class="txt">每个选号网都可以进行个性</div>
              </div>
              <div>
                <img
                  style="width: 125px; height: 212px"
                  src="../../../assets//ConsignmentFourzero/home/gxh.png"
                  alt=""
                />
              </div>
            </div>
            <!-- one end -->
            <!-- one -->
            <div class="box1">
              <div class="titlename">商家货源共享</div>
              <div class="txtName">
                <div class="txt">几百位商家一手货源</div>
                <div class="txt">一对一沟通合作,无中间商</div>
              </div>
              <div>
                <img
                  style="width: 242px; height: 189px"
                  src="../../../assets//ConsignmentFourzero/home/sjh.png"
                  alt=""
                />
              </div>
            </div>
            <!-- one end -->
            <!-- one -->
            <div class="box1">
              <div class="titlename">API接口互通高效对接</div>
              <div class="txtName">
                <div class="txt">一天可对接十几家 开放过百个对接渠道</div>
              </div>
              <div>
                <img
                  style="width: 230px; height: 179px"
                  src="../../../assets//ConsignmentFourzero/home/api.png"
                  alt=""
                />
              </div>
            </div>
            <!-- one end -->
            <!-- one -->
            <div class="box1">
              <div class="titlename">员工管理</div>
              <div class="txtName">
                <div class="txt">自定义数据权限 子账号权限授权</div>
                <div class="txt">角色权限数据自定义配置</div>
              </div>
              <div>
                <img
                  style="width: 240px; height: 157px"
                  src="../../../assets//ConsignmentFourzero/home/ygg.png"
                  alt=""
                />
              </div>
            </div>
            <!-- one end -->
            <!-- one -->
            <div class="box1">
              <div class="titlename">高扩展性</div>
              <div class="txtName">
                <div class="txt">支持增配:聊天系统，支付系统</div>
                <div class="txt">租号，代练，等其他功能</div>
              </div>
              <div>
                <img
                  style="width: 212px; height: 212px"
                  src="../../../assets//ConsignmentFourzero/home/gkzx.png"
                  alt=""
                />
              </div>
            </div>
            <!-- one end -->
          </div>
        </div>
        <!-- 系统介绍 -->
        <div class="sysJS">
          <div class="systitle">系统介绍</div>
          <div class="sys_one">
            <!-- one -->
            <div class="box1" v-for="item in list" :key="item.id">
              <div>
                <img class="img" :src="item.img" alt="" />
              </div>
              <div class="titlename">{{ item.title }}</div>
              <!-- <div class="txtName">
                <div class="txt">{{ item.des }}</div>
              </div> -->
              <el-popover
                placement="right"
                :width="507"
                popper-class="user-pop-over"
                ref="popover"
                trigger="hover"
                :content="item.remark"
              >
                <div class="txtName" slot="reference">
                  <div class="txt">{{ item.des }}</div>
                </div>
              </el-popover>
            </div>
            <!-- one end -->
            <!-- one -->
            <div
              class="box1"
              @click="$router.push('/xtjs')"
              style="padding-top: 56px"
            >
              <div>
                <img
                  class="img"
                  src="../../../assets//ConsignmentFourzero/home/gengduo.png"
                  alt=""
                />
              </div>
              <div class="onetype" style="">更多详情</div>
            </div>
            <!-- one end -->
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Header from '../../../components/ConsignmentFourzero/header.vue'
import Footer from '../../../components/ConsignmentFourzero/footer.vue'
import { GetPcfnList } from '../../../api/IntroductionPartners/index'
import resourcesManage from '@/api/PCWebImages/resourcesManage'
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      images: [
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56ce46e2c18.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d39422c1a.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d883f2c1b.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56de87e2c1c.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56e24672c1d.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56ce46e2c18.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d39422c1a.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d883f2c1b.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56de87e2c1c.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56e24672c1d.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56ce46e2c18.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d39422c1a.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d883f2c1b.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56de87e2c1c.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56e24672c1d.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56ce46e2c18.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d39422c1a.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d883f2c1b.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56de87e2c1c.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56e24672c1d.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56ce46e2c18.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d39422c1a.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d883f2c1b.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56de87e2c1c.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56e24672c1d.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56ce46e2c18.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d39422c1a.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d883f2c1b.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56de87e2c1c.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56e24672c1d.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56ce46e2c18.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d39422c1a.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d883f2c1b.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56de87e2c1c.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56e24672c1d.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56ce46e2c18.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d39422c1a.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d883f2c1b.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56de87e2c1c.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56e24672c1d.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56ce46e2c18.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d39422c1a.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56d883f2c1b.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56de87e2c1c.jpg',
        'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff56e24672c1d.jpg',
      ],
      list: [],
      videoInfo:''
    }
  },
  created() {
    this.getList()
    this.getVideo()
  },
  methods: {
    // 获取首页宣传视频
    getVideo(){
      let obj = {
        systemType: 3
      }
      resourcesManage
        .getListweb(obj)
        .then(res => {
          if(res.rows&&res.rows.length){
           this.videoInfo = res.rows[0]
          }
        })
        .catch(err => {
        
        });
    },
    async getList() {
      const res = await GetPcfnList({ type: 1 })
      console.log(res);
      this.list = res.rows.splice(0, 7)
    }
  },


}
</script>

<style lang="scss" scoped>
@keyframes move {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-1400px);
  }
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-5px);
  }
  20% {
    transform: translateX(5px);
  }
  30% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  50% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(5px);
  }
  70% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(5px);
  }
  90% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

.main {
  width: 100%;
  background-color: #000;
}
.center {
  // width: 1200px;
  // height: 100px;
  // margin: 0 auto;
  .navbar {
    width: 1200px;
    margin: 0 auto;
  }
  .box {
    width: 1200px;
    height: 130px;
    overflow: hidden;
  }
  .box ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    animation: move 18s linear 1s infinite;
  }
  @keyframes move {
    0% {
      transform: translate(0);
    }
    100% {
      transform: translate(-1000px);
    }
  }
  .box ul li img {
    height: 130px;
  }
  .box:hover ul {
    /* 定义位移动画；ul使用动画；鼠标悬停暂停动画 */
    animation-play-state: paused;
  }
.shipin-box{
  // height: 400px;
  background-color: #fff;
  padding-bottom: 30px;
  .video_box{
    margin: 0 auto;
    margin-top: 15px;
    width: 800px;
    height: 450px;
    background-color: #e9eef5;
    border-radius: 6px;
    border: 1px solid #ccc;
    overflow: hidden;
  }
  video{
   width: 100%;
   height: 100%;
  }
}
.systitle {
      padding-top: 33px;
      width: 128px;
      background: linear-gradient(
        135deg,
        #32c5ff 0%,
        #b620e0 100%
      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
      -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
      font-weight: 800;
      font-size: 32px;
      color: #fff;
      margin: 0 auto;
    }
  .sysTs {
    background-color: #f5f5f8;
    padding: 0 133px;
    height: 836px;
    

    .sys_one {
      padding-top: 26px;
      display: flex;
      flex-wrap: wrap;
      .box1 {
        width: 300px;
        height: 350px;
        background: #ffffff;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        margin-right: 16px;
        margin-bottom: 16px;
        display: inline-block;
        cursor: pointer;
        transition: transform 0.5s;
        cursor: pointer;
        .titlename {
          height: 20px;
          font-weight: 800;
          font-size: 20px;
          color: #333333;
          line-height: 30px;
          font-style: normal;
        }
        .txtName {
          padding-top: 15px;
          height: 60px;
          margin-bottom: 33px;
          .txt {
            margin-top: 5px;
            height: 20px;
            font-weight: 500;
            font-size: 16px;
            color: #666666;
            line-height: 20px;
            text-align: center;
            font-style: normal;
          }
        }
      }

      .box1:hover {
        animation: shake 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
      }

      .box1:nth-child(3n) {
        margin-right: 0;
      }
    }
  }

  .sysJS {
    background-color: #fff;
    padding: 0 118px;
    height: 566px;
    .systitle {
      padding-top: 33px;
      width: 128px;
      background: linear-gradient(
        135deg,
        #32c5ff 0%,
        #b620e0 100%
      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
      -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
      font-weight: 800;
      font-size: 32px;
      color: #fff;
      margin: 0 auto;
    }

    .sys_one {
      padding-top: 26px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .box1 {
        width: 212px;
        height: 212px;
        background: #ffffff;
        border-radius: 10px;
        padding: 20px 0;
        text-align: center;
        margin-right: 16px;
        margin-bottom: 16px;
        cursor: pointer;
        transition: All 0.4s ease-in-out;
        -webkit-transition: All 0.4s ease-in-out;
        -moz-transition: All 0.4s ease-in-out;
        -o-transition: All 0.4s ease-in-out;
        .img {
          width: 72px;
          height: 72px;
        }
        .titlename {
          height: 18px;
          font-weight: 500;
          font-size: 18px;
          color: #333333;
          line-height: 30px;
          font-style: normal;
        }
        .onetype {
          width: 72px;
          height: 30px;
          background: linear-gradient(
            135deg,
            #32c5ff 0%,
            #b620e0 100%
          ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
          -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
          -webkit-text-fill-color: transparent; /*给文字设置成透明*/
          font-size: 18px;
          color: #fff;
          margin: 0 auto;
        }
        .txtName {
          padding-top: 10px;
          height: 60px;
          margin-bottom: 33px;
          .txt {
            height: 20px;
            font-weight: 300;
            font-size: 14px;
            color: #666666;
            line-height: 20px;
            text-align: center;
            font-style: normal;
          }
        }
      }

      .box1:hover {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
      }

      .box1:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}

::v-deep .el-popover .el-popover__content {
  // white-space: pre-wrap !important;
  // font-size: 22px;
}
</style>

<style>
/* .user-pop-over[x-placement^='right'] .popper__arrow {
  border-right-color: #f56e48 !important;
}

.user-pop-over[x-placement^='right'] .popper__arrow::after {
  border-right-color: #f56e48 !important;
} */
.user-pop-over.el-popover {
  color: #000;
  height: 281px !important;
  overflow: hidden;
  /* margin-top: -56px !important; */
  background-color: #fff !important;
  border-color: #fff !important;
  white-space: pre-wrap !important;
}

/* .user-pop-over .el-popover__title {
  color: #f5a416 !important;
} */
</style>